<template>
	<div :class="hhgClassName">
		<a-table :columns="hhgColumns" v-bind="attrs" :data-source="hhgList" :pagination="hhgPagination">
			<template #headerCell="{ column }">
				<div :style="{ textAlign: column.headerAlign }">{{ column.title }}</div>
			</template>
		</a-table>
	</div>
</template>

<script setup>
import { onMounted, defineProps, watch, ref, useAttrs } from 'vue'
const props = defineProps({
	dataSources: Array,
	columns: Array,
	pagination: Boolean,
	className: {
		type: String,
		required: false,
		default: ()=> 'baseTable'
	}
})
const hhgList = ref(null)
const hhgColumns = ref(null)
const hhgPagination = ref(props.pagination)
const hhgClassName = ref(props.className)
const attrs = useAttrs()
watch(() => props.columns, (val) => {
  if (val) {
	hhgColumns.value = val
	
	// dataSource.value = val
  }
}, { deep: true }, { immediate: true })
watch(() => props.dataSources, (val) => {
  if (val) {
	hhgList.value = val
  }
}, { deep: true }, { immediate: true })
onMounted(() => {
	hhgList.value = props.dataSources
	hhgColumns.value = props.columns
})
</script>
<style scoped lang="scss"></style>